<template>
  <section id="login">
    <div class="login" @keydown.enter="handleSubmit">
      <div class="login-con">
        <Card >
          <template #header>
            <div class="card-header">
              <i class="el-icon-user-solid" /><span>欢迎登录</span>
            </div>
          </template>
          <Form :model="form" :rules="rules" ref="loginForm" label-width="80px" class="login-con-form">
            <FormItem label="登录账号" prop="email">
              <Input v-model="form.email" />
            </FormItem>
            <FormItem label="登录密码" prop="password">
              <Input v-model="form.password" type="password" />
            </FormItem>
            <FormItem>
              <Button type="primary" @click="handleSubmit">登录</Button>
              <Button>取消</Button>
            </FormItem>
          </Form>
        </Card>
      </div>
    </div>
  </section>
</template>

<script>
import {mapState, mapActions} from 'vuex';
import util from "@/libs/util";
import user from "@/api/user"

export default {
  name: "login",
  components: {
  },
  data() {
    return {
      buttonLoading: false,
      // 表单内容，email && 密码
      form: {
        email: '',
        password: ''
      },
      // 表单验证，email && 密码
      rules: {
        email: [{required: true,message: '不能为空',trigger: 'blur'}],
        password: [{required: true, message: '密码不能为空', trigger: 'blur'}]
      }
    }
  },
  created() {
  },
  computed: {
    ...mapState({
    })
  },
  methods: {
    ...mapActions({
    }),
    // 提交登录
    handleSubmit() {
      this.buttonLoading = true;
      // 表单验证
      let formLabel = this.$refs.loginForm;

      formLabel.validate((valid) => {
        if(!valid) {
          util.error('表单验证失败!');
          this.buttonLoading = false;
          return false
        }

        user.getToken(this.form).then(ret => {
          // 保存access_token
          util.wsCache.set('crmToken', ret.data.data.token)
          // 跳转
          util.success("登录成功！")
          window.location.href = '/'
        }).catch(ret => {
          this.buttonLoading = false

        })
      })
    }
  }
}
</script>

<style scoped lang="less">

.login{
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-image: url('../assets/image/login/bg.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
  &-con {
    position: absolute;
    right: 160px;
    top: 50%;
    transform: translateY(-60%);
    width: 400px;
  }
}
</style>
